<template>
  <a-modal
    class="import-container"
    :title="modalTitle"
    :bodyStyle="{maxHeight: '650px', overflow: 'auto'}"
    v-model="show"
    width = "800px"
    destroyOnClose
    :maskClosable="false"
    :footer="null"
    :getPopupContainer="
      triggerNode => {
      return triggerNode.parentNode;
      }
    "
    @cancel="close"
  >
    <!-- <div class="import-type-layout" v-if="!importType">
      <div class="type-item" @click="onTypeItemClicked('LOCAL')">
        <span>
          <i class="icon aufontAll h-icon-all-a-ic_upload_localfile"></i>本地导入</span>
        <span class="icon aufontAll h-icon-all-arrow-right-o"></span>
      </div>
      <div class="type-item" @click="onTypeItemClicked('MARKET')">
        <span>
          <i class="icon aufontAll h-icon-all-upload_am"></i> 应用市场</span>
        <span class="icon aufontAll h-icon-all-arrow-right-o"></span>
      </div>
    </div> -->
    <div class="import-layout" v-if="importType">
      <div class="step-content">
        <fileUpload
          v-if="curStep === 0"
          ref="fileUpload"
          :importType="importType"
          @nextStep="nextStep"
          @onTypeItemReturn="onTypeItemReturn"
        />

        <fileValidate
          v-else-if="curStep === 1"
          :fileName="uploadResult.fileName"
          :importType="importType"
          @onTypeItemReturn="onTypeItemReturn"
          @prevStep="prevStep"
          @nextStep="nextStep"
          @setModalTitle="setModalTitle"
        />

        <fileImport
          v-else-if="curStep === 2"
          :importType="importType"
          :uploadResult="uploadResult"
          :validResult="validResult"
          @onTypeItemReturn="onTypeItemReturn"
          @close="close"
        />
      </div>

    </div>

    <div class="modal-footer" v-if="!importType">
      <a-button type="default" @click="close">取消</a-button>
    </div>
  </a-modal>
</template>
<script lang="ts">
import { Modal, Steps } from '@h3/antd-vue';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import fileImport from './file-import.vue';
import fileUpload from './file-upload.vue';
import fileValidate from './file-validate.vue';



@Component({
  name:"",
  components: {
    AModal: Modal,
    ASteps: Steps,
    AStep: Steps.Step,
    fileUpload,
    fileValidate,
    fileImport
  }
})
export default class ImportApp extends Vue {
  @Prop() value !: boolean;

  // 展示
  show:boolean = false;

  // 弹窗标题
  modalTitle:string = '导入-应用';

  // 当前步骤
  curStep:number = 0;

  //导入方式：LOCAL-本地、MARKET-应用市场
  importType:string = 'LOCAL'; 


  @Watch('value')
  onValueChange(v: boolean){
    this.show = v;
  }

  /**
   * 选择导入方式事件
   */
  onTypeItemClicked(type){
    this.importType = type;
  }

  /**
   * 返回导入方式选择界面
   */
  onTypeItemReturn(){
    this.importType = 'LOCAL';
    this.curStep = 0;
  }

  /**
   * 关闭
   * */ 
  close(){
    this.$emit('input', false);
    this.curStep = 0;
    this.modalTitle = '导入-应用';
    this.importType = 'LOCAL';
  }

  /**
   * 下一步逻辑
   * */
  uploadResult: any = {}
  validResult: any = {}
  nextStep(result){
    //@ts-ignore
    if(this.curStep === 0) this.uploadResult = result
    else if(this.curStep === 1) this.validResult = result
    this.curStep += 1;
  }

  /**
   * 上一步
   * */ 
  prevStep(){
    this.curStep -= 1;
  }

  setModalTitle(title) {
    this.modalTitle = title
  }
}
</script>
<style lang="less">
  .import-container {
  & .import-type-layout{
    margin: 74px 0;
    .type-item{
      position: relative;
      margin: 24px auto;
      border: 1px solid #D9D9D9;
      width: 280px;
      height: 95px;
      line-height: 95px;
      text-align: center;
      border-radius: 3px;
      cursor: pointer;
      span>i{
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        font-size: 22px;
      }
      .h-icon-all-arrow-right-o{
        display: none;
      }
    }
    .type-item:hover{
      border-color: #17BC94;
      color:#17BC94;
      .h-icon-all-arrow-right-o{
        display: inline-block;
        position: absolute;
        top: 0;
        right: 30px;
      }
    }
  }
  & .import-layout {
    min-height: 300px;
    position: relative;
    .import-type-exit{
      display: inline-block;
      margin-bottom: 10px;
      font-size: 16px;
      color: #000;
      cursor: pointer;
    }
    .import-type-exit:hover{
      color: #17BC94;
    }
    .data-upload{
      width: 80%;
      margin: 16px auto;
    }
    & .steps {
      width: 50%;
      margin: 30px auto;
    }
  }
  .ant-table table{
    border: 1px solid #E9E9E9;
    border-bottom: none;
  }
  .ant-table-thead > tr > th{
    padding: 8px 10px;
  }
  .ant-table-tbody > tr > td{
    padding: 4px 10px;
  }
}
</style>

<style lang="less" scoped>
  /deep/ .ant-modal-body {
    padding: 0;
  }
  /deep/ .modal-footer {
    padding: 10px 16px;
    text-align: right;
    background: transparent;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
  }

  /deep/ .modal-body {
    margin: 24px;
    min-height: 300px;
    position: relative;
  }
</style>